<template>
  <div>
    <AddOrEditDialog
      ref="addOrEditDialogRef"
      title="专业群"
      :dialogWidth="dialogWidth"
      :formHeader="formHeader"
      :form="form"
      :action="action"
      :url="$urls.API_URL_BACKSTAGE_SCHOOLMAJORGROUP_MANAGE"
    >
      <template #departmentId>
        <SchoolDepartmentSelect
          v-model="form.departmentId"
          clearable/>
      </template>
      <template #teachers>
        <el-transfer
          v-model="form.teacherIds"
          filterable
          filter-placeholder="请输入要搜索的教师名称"
          :data="data"
          :titles="['全部群主', '分配群主']"
          :button-texts="['还原', '新增']"
          @change="handleChange"
        />
      </template>
    </AddOrEditDialog>
  </div>
</template>

<script lang="ts" setup>
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
// 导入部门下拉组件
import SchoolDepartmentSelect from '@/components/uem/SchoolDepartmentSelect.vue';
import {
  defineExpose, defineProps, ref, withDefaults, getCurrentInstance, onMounted,
} from 'vue';
import { FormHeader } from '@/types/interface/base_interface';
import { SchoolMajorGroup } from '@/types/interface/school_interface';
import Request from '@/api/request/request';

// 接收父容器参数
interface Props {
  action?: string, // 表单的处理类型，post表示提交，put表示编辑
}
const props = withDefaults(defineProps<Props>(), {
  action: 'post',
});

const { proxy } = getCurrentInstance();

// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '专业群名称',
    prop: 'name',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
      {
        min: 2,
        max: 10,
        message: '长度在 2 到 10个字符',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '所属部门',
    prop: 'departmentId',
    type: 'custom',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '分配群主',
    prop: 'teachers',
    type: 'custom',
  },
  {
    label: '排序',
    prop: 'sort',
    type: 'number',
  },
]);

const dialogWidth = ref('800px');

interface Option {
  key: number
  label: string
  initial: string
}

const data = ref<Option[]>([]);

const teacherIds = ref<number[]>([]);

// 获取所有老师集合
const getTeacher = async () => {
  const resData:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHER_ALL_MANAGE}`).get();
  if (resData.success) {
    const newData = resData.data;
    newData.forEach((city:any) => {
      data.value.push({
        key: city.id,
        label: city.name,
        initial: city.name,
      });
    });
  }
};
onMounted(getTeacher);

// 表单对象
const form = ref<SchoolMajorGroup>();
let formInit:SchoolMajorGroup; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，gong供父组件调用，传入表单对象
const addOrEditDialogRef = ref();
const openDialog = (schoolMajorGroup:SchoolMajorGroup) => {
  formInit = { ...schoolMajorGroup }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = { ...schoolMajorGroup };
  if (form.value.teachers != null) {
    teacherIds.value = [];
    form.value.teachers.forEach((city:any, index:any) => teacherIds.value.push(city.id));
  } else {
    teacherIds.value = [];
  }
  addOrEditDialogRef.value!.openDialog();
  form.value.teacherIds = teacherIds.value;
};

const handleChange = (
  value: number,
  direction: 'left' | 'right',
  movedKeys: number[],
) => {
  teacherIds.value.push(value);
};

// 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  form.value = { ...formInit };
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
